<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="inc :: header('合同新增')"/>
</head>
<body>
    <form id="dataForm" class="layui-form layui-form-pane" style="margin: 10px">
        <div class="layui-form-item">
            <label class="layui-form-label">合同编号</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" readonly name="agreementId" id="agreementId" th:value="${agreementId}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出租方</label>
            <div class="layui-input-inline">
                <input type="hidden" name="getUserIdcard" id="getUserIdCard">
                <input type="hidden" name="homeId" id="hid">
                <input type="hidden" name="home" id="home">
                <select id="get" lay-filter="get">
                    <option>请选择出租方</option>
                </select>
            </div>
            <div class="layui-form-mid" id="getContent">
                <!--身份证:44654654564&nbsp;&nbsp;出租房源:乾隆天下-B栋1001 116m<sup>2</sup>-->&nbsp;
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">承租方</label>
            <div class="layui-input-inline">
                <input type="hidden" name="setUserIdcard" id="setUserIdCard">
                <select id="set" lay-filter="set">
                    <option>请选择承租方</option>
                </select>
            </div>
            <div class="layui-form-mid" id="setContent">
                &nbsp;
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">租金</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input"  name="getMoney" placeholder="请输入租金">
            </div>
            <div class="layui-form-mid">
                <input type="radio" class="layui-input"  name="getDw" value="year" title="年度">
                <input type="radio" class="layui-input"  name="getDw" value="season" title="季度">
                <input type="radio" class="layui-input"  name="getDw" value="month" checked title="月份">
                <input type="radio" class="layui-input"  name="getDw" value="day" title="天">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">签订时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="startDate"  name="createDate">
            </div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="endDate"  name="enDate">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">租金涨幅比</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input"  name="zfb">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电表读数</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input"  name="eleNumberStart">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">水表读数</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input"  name="waterNumberStart">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">附件上传</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                                <tr>
                                    <th>文件名称</th>
                                    <th>大小</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="fileList">

                            </tbody>
                        </table>
                    </div>
                    <a class="layui-btn layui-btn-normal layui-btn-danger" id="checkBtn">选择文件</a>
                    <a class="layui-btn layui-btn-normal" id="upBtnAction">开始上传</a>
                </div>
            </div>
        </div>
    </form>
    <script>
        var form,files=[];
        layui.use(['form','upload','laydate'],function () {
            getSelectData();
            var upload = layui.upload;
            var date = layui.laydate;
            form = layui.form;
            //获取当前系统时间
            var now = new Date().valueOf();
            date.render({
                elem:'#startDate',
                trigger:'click',
                min:now,
                done:function (value,date,startDate) {

                }
            });
            date.render({
                elem:'#endDate',
                trigger:'click',
                min:now,
                done:function(value,date,startDate){
                    var startDate = new Date($('#startDate').val()).getTime();
                    var endDate = new Date(value).getTime();
                    if(startDate>endDate){
                        layer.alert("结束时间不能小于开始时间");
                        $('#endDate').val($('#startDate').val());
                    }
                }
            });
            form.on('select(get)',function (data) {//监听出租方下拉选择事件

                var values = data.value.split(",");
                $('#hid').val(values[1]);
                $('#home').val(values[2]+"-"+values[3]+"m<sup>2</sup>");
                $('#getUserIdCard').val(values[0]);
                $('#getContent').html('身份证：'+values[0]+'&nbsp;&nbsp;出租房源：'+values[2]+'-'+values[3]+'m<sup>2</sup>');
                setSelectData(values[1]);
            });
            form.on('select(set)',function (data) {//监听出租方下拉选择事件
                var idcard = data.value;//获取身份证号码
                $('#setContent').html('身份证：'+idcard);
                $('#setUserIdCard').val(idcard);
            });

            //多文件选择上传
            var fileListView = $('#fileList'),
                uploadListIns = upload.render({
                    elem:'#checkBtn',
                    url:'/fc/upload/t_agreement/'+$('#agreementId').val(),//文件上传的地址，改为你自己的上传接口
                    accept:'file',//配置可以上传文件的类型，[jpg,gif]
                    multiple:true,//允许多文件
                    auto:false,//是否自动上传  true是自动上传
                    bindAction:'#upBtnAction',//绑定文件上传点击按钮  auto:true时不需要写
                    choose:function (obj) {//选择文件后触发的事件
                        var files = this.files = obj.pushFile();//获取选中的文件列表
                        //读取本地文件
                        obj.preview(function (index,file,result) {
                            var tr = '<tr id="upload-'+index+'">' +
                                            '<td>'+file.name+'</td>' +
                                            '<td>'+(file.size/1024).toFixed(1)+'kb</td>' +
                                            '<td>等待上传</td>' +
                                            '<td>' +
                                            '  <a class="layui-btn layui-btn-xs layui-hide" id="btnUpload">重传</a>' +
                                            '  <a class="layui-btn layui-btn-xs layui-btn-danger" id="btnDelete">删除</a>' +
                                            '</td>' +
                                     '</tr>';
                            tr = $([tr].join(''));

                            //点击删除
                            tr.find('#btnDelete').on('click',function(){
                                tr.remove();//删除行；
                                delete files[index];//删除存储到uploadListInsd里面的文件
                                //防止相同文件名无法重新选择
                                uploadListIns.config.elem.next()[0].value = '';
                            });

                            //添加行
                            fileListView.append(tr);
                        });
                    },
                    method:'post',//提交的方式
                    done:function (data,index,upload) {
                        if(data.is){
                            var tr = fileListView.find("tr#upload-"+index),
                                tds = tr.children();
                            tds.eq(2).html("<span style='color:#5FB878'>上传成功</span>");
                            tds.eq(3).html('');
                            return delete this.files[index];
                        }
                    },
                    error:function (index,upload) {
                        var tr = fileListView.find("tr#upload-"+index),
                            tds = tr.children();
                        tds.eq(2).html("<span style='color:#ff5277'>上传成功</span>");
                        tds.eq(3).find("#btnUpload").removeClass('layui-hide');//显示重传按钮
                    }

                });


        });
        function getSelectData() {
            //TODO 要过滤已经出租的
            var url = "/guc/find";
            $.get(url, function (data) {
                //把字符串转换为Json对象
                data = JSON.parse(data);
                $.each(data.data, function (i, item) {
                    var obj = "";
                    obj+= item.idcard;
                    if (item.con01 > 0) {
                        var optigroup = "<optgroup label='" + item.name + "(" + item.idcard + ")'>";
                        for (var j = 0; j < item.list.length; j++) {
                            var home = item.list[j];
                            obj+= ","+home.id;
                            var homes = home.xqName + home.lhName + home.fhName;
                            obj+=","+homes;
                            obj+=","+home.area;
                            optigroup += "<option value='" +obj + "'>" +homes+ "</option>";
                        }
                        optigroup += "</optgroup>";
                        $('#get').append(optigroup);
                    }
                });
                form.render('select');//刷新控件
            });
        }
        function setSelectData(hid){
            $('#set').empty();//清空标签内的内容
            $('#set').append(new Option("请选择承租方",""));
            form.render('select');//刷新控件
            var url = "/guc/find?con01="+hid;
            $.get(url,function (data) {
                //把字符串转换为Json对象
                data = JSON.parse(data);
                $.each(data.data,function (i,item) {
                    var option = new Option(item.name+"("+item.idcard+")",item.idcard);
                    $('#set').append(option);
                });
                form.render('select');//刷新控件
            });
        }


    </script>
</body>
</html>